<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> 
<%@ taglib uri="http://www.springframework.org/tags/form" prefix="fm" %>   
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>员工添加-</title>
<link rel="stylesheet" type="text/css" href="css/css.css" />
<style type="text/css">
	#emptable td{
		font-size: 16px;
		border:none !important;
	}
	.bbD .td{
		font-size: 16px;
		text-aign:right;
	}
	.btext2 .text2{
		font-size: 16px;
		min-width:292px;
	}
	.button{
			margin-top:20px;
			font-size: 16px;
			width: 135px;
			height: 40px;
			border-radius:20px;
			border: 1px solid #ccc;
			margin-left: 35px;
			color: #fff;
			background-color: #47a4e1
	}
</style>
<script type="text/javascript" src="js/jquery.min.js"></script>
</head>
<body>
	<div id="pageAll">
		<div class="pageTop">
			<div class="page">
				<img src="img/coin02.png" /><span><a href="main.do">首页</a>&nbsp;-&nbsp;
				<a href="empinfo.do">员工管理</a>&nbsp;-</span>&nbsp;员工添加
			</div>
		</div>
		<div class="page ">
			<!-- 上传广告页面样式 -->
			<div class="banneradd bor">
				<form action="empadd.do" method="post" onsubmit="return isExsit()">
					<div class="baTopNo">
						<span>基本信息</span>
						<hr/>
					</div>
					<div class="baBody" >
						<table id="emptable">	
							<tr class="bbD" >
								<td class="td">部门：</td>
								<td>
									<select class="input3" name="did" id="dept" onblur="checkDept()">
										<option value="">请选择部门</option>
										<c:forEach items="${sessionScope.depts }" var="dept">
											<option value="${dept.id}">${dept.name }</option>
										</c:forEach>
									</select>
								</td>				
								<td><span id="deptinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">员工姓名：</td>
								<td><input type="text" class="input3" name="empname" id="empname" onblur="checkEmpname()"/></td>
								<td><span id="empnameinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">用户名：</td>
								<td><input type="text" class="input3" name="username" id="username" onblur="checkUsername()"/></td>
								<td><span id="usernameinfo"></span></td>
							</tr>
							<tr class="bbD" >
								<td class="td">员工工号：</td><td><input type="text" class="input3" name="number" id="number" onblur="checkNumber()"/></td>
								<td><span id="numberinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">岗位名称：</td>
								<td>
									<select class="input3" name="pid" id="position" onblur="checkPosition()">
										<option value="">请选择岗位</option>
										<c:forEach items="${sessionScope.positions }" var="position">
											<option value="${position.id}">${position.name }</option>
										</c:forEach>
									</select>
								</td>
								<td><span id="positioninfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">岗位职责：</td>
								<td class="btext2">
									<textarea class="text2" name="duty" id="duty" onblur="checkDuty()"></textarea>
								</td>
								<td><span id="dutyinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">性别：</td>
								<td class="td">
									<input type="radio" name="sex" value="1" id="sex" checked="checked"/>男&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
									<input type="radio" name="sex" value="0" id="sex"/>女
								</td>	
							</tr>
							<tr class="bbD">
								<td class="td">工作电话：</td><td><input type="text" class="input3" name="tel" id="tel" onblur="checkTel()"/></td>
								<td><span id="telinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">手机号码：</td><td><input type="text" class="input3" name="phone" id="phone" onblur="checkPhone()"/></td>
								<td><span id="phoneinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">邮箱：</td><td><input type="text" class="input3" name="email" id="email" onblur="checkEmail()"/></td>
								<td><span id="emailinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">QQ：</td><td><input class="input3" type="text" name="qq" id="qq" onblur="checkQQ()"/></td>
								<td><span id="qqinfo"></span></td>
							</tr>
							<tr class="bbD">
								<td class="td">短号：</td><td><input class="input3" type="text" name="shortnumber" id="shortnumber" onblur="checkShortnumber()"/></td>
								<td><span id="shortnumberinfo"></span></td>
							</tr>							
							<tr class="bbD">
								<td class="td">是否经办人：</td><td><select class="input3" id="allot" name="allot"><option value="0" selected="selected">否</option><option value="1">是</option></select></td>
							</tr>
						</table>
							<input class="button" type="submit" value="添加" />
							<input class="button" type="reset" value="重置" />							
					</div>
				</form>		
			</div>

			<!-- 上传广告页面样式end -->
		</div>
	</div>
	<!-- js非空验证 -->
	<script type="text/javascript">
	
		function checkDept(){
			$("#deptinfo").html("");
			var dept=$("#dept").val();
			if(dept==null || ""==dept){
				$("#deptinfo").html("部门不可以为空").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkEmpname(){
			$("#empnameinfo").html("");
			var empname=$("#empname").val();
			if(empname==null || ""==empname){
				$("#empnameinfo").html("姓名不可以为空").css({color:"red"});
				return false;
			}
			return true;
		}
		function checkUsername(){
			$("#usernameinfo").html("");
			var username=$("#username").val();
			if(username==null || ""==username){
				$("#usernameinfo").html("用户名不可以为空").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkNumber(){
			$("#numberinfo").html("");
			var number=$("#number").val();
			var reg = /^\d+$/;
			if(number==null || ""==number){
				$("#numberinfo").html("员工工号不可以为空").css({color:"red"});
				return false;
			}else if(!reg.test(number)){ 
				$("#numberinfo").html("员工工号必须是数字").css({color:"red"});
				return false; 
			}else if(number.length!=4){
				$("#numberinfo").html("员工工号必须是4位数字").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkPosition(){
			$("#positioninfo").html("");
			var position=$("#position").val();
			if(position==null || ""==position){
				$("#positioninfo").html("岗位不可以为空").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkDuty(){
			$("#dutyinfo").html("");
			var duty=$("#duty").val();
			if(duty==null || ""==duty){
				$("#dutyinfo").html("岗位职责不可以为空").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkTel(){
			$("#telinfo").html("");
			var reg=/^((0\d{2,3})-)(\d{7,8})+$/;
			var tel=$("#tel").val();
			if(tel==null || ""==tel){
				$("#telinfo").html("电话不可以为空").css({color:"red"});
				return false;
			}else if(!reg.test(tel)){
				$("#telinfo").html("电话格式必须是'0xx/0xxx-xxxxxxx'").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkPhone(){
			$("#phoneinfo").html("");
			var reg=/^((13[0-9]{1})|159|153|150|151|180)+\d{8}$/;
			var phone=$("#phone").val();
			if(phone==null || ""==phone){
				$("#phoneinfo").html("手机不可以为空").css({color:"red"});
				return false;
			}else if(!reg.test(phone)){
				$("#phoneinfo").html("手机格式不正确").css({color:"red"});
				return false;
			}else{
				$.ajax({
					url:"phone.do",
					type:"POST",
					data:"phone="+phone,
					dataType:"text",
					success:function(result){
						if(result == "true"){
							$("#phoneinfo").html("该手机号码不可用").css({color:"red"});
							return false;
						}else{
							$("#phoneinfo").html("该手机号码可用").css({color:"green"});
							return true;
						}
					}
				})
			}
			return true;
	}	 
		function checkEmail(){
			$("#emailinfo").html("");
			var email=$("#email").val();
			var reg=/^[a-zA-Z0-9_-]+@([a-zA-Z0-9]+\.)+(com|cn|net|org)$/; 
			if(email==null || ""==email){
				$("#emailinfo").html("邮箱不可以为空").css({color:"red"});
				return false;
			}
			if(!reg.test(email)){
				$("#emailinfo").html("邮箱格式不正确").css({color:"red"});
				return false;
			}
			return true;
		}
		
		function checkQQ(){
			$("#qqinfo").html("");
			var reg = /^\d+$/;
			var qq=$("#qq").val();
			if(qq==null || ""==qq){
				$("#qqinfo").html("qq不可以为空").css({color:"red"});
				return false;
			}else if(!reg.test(qq)){
				$("#qqinfo").html("qq必须是数字").css({color:"red"});
				return false;
			}else if(qq.length<5 || qq.length>11){
				$("#qqinfo").html("qq必须是5-11位数字").css({color:"red"});
				return false;
			}
			return true;
		}
		function checkShortnumber(){
			$("#shortnumberinfo").html("");
			var reg = /^\d+$/;
			var shortnumber=$("#shortnumber").val();
			if(!reg.test(shortnumber)){
				$("#shortnumberinfo").html("短号必须是数字").css({color:"red"});
				return false;
			}else if(shortnumber.length!=6){
				$("#shortnumberinfo").html("短号必须是6位数字").css({color:"red"});
				return false;
			}
			return true;
		}
		function isExsit(){
			if(checkDept() && checkEmpname() && checkUsername() && checkNumber() && checkPosition() && checkDuty() && checkTel() && checkPhone() && checkEmail() &&checkQQ() && checkShortnumber()){
				return true;
			}else{
				return false;
			}
		}
		
		
	</script>
</body>
</html>